<template>
    <div class="center">
        <el-alert v-show="error" title="未查询到集团默认管理员角色，请联系超级管理员。" type="success">
        </el-alert>
        <div style="height:450px;">
            <!-- 角色列表 -->
            <el-collapse v-model="activeNames" @change="handleChange" v-if="!error">
                <el-collapse-item :title="item.roleDescription" name="1" v-for="(item,index) in roleList" :key="index">
                    <template slot="title">
                        {{item.roleDescription}}
                    </template>

                    <div class="content">
                        <el-tree :data="roleRespData" :props="defaultProps2" node-key="id"
                            :default-expanded-keys="expandedKeys"></el-tree>
                    </div>
                    <!-- 职责树 -->
                    <!-- <ec-table :data="roleRespData" size="small" min-height="300" style="width: 100%"
                                highlight-current-row row-key="pkRespModule" :tree-props="{children: 'children'}">
                                <el-table-column property="pkRespModule" label="职责分配编号"></el-table-column>
                                <el-table-column property="label" label="模块/菜单"></el-table-column>
                                <el-table-column property="id" label="模块/菜单编号"></el-table-column>
                                <el-table-column property="pid" label="上级模块/菜单编号"></el-table-column>
                            </ec-table> -->
                </el-collapse-item>
            </el-collapse>
        </div>
        <div style="text-align:center;margin-top:15px;">
            <el-button type="primary" size="mini" @click="HandleRoleResp()" v-if="!error">维护角色</el-button>

        </div>
        <!--选择菜单弹出框  -->
        <module-dailog v-if="moduledailogVisible" ref="moduledailog" @refreshDataList="getRoleRespInfo">
        </module-dailog>
    </div>
</template>
<script>
    import * as admingroupService from '@/api/upms/admingroup'
    import * as respModuleService from '@/api/upms/respmodule'
    import ModuleDailog from '@/views/upms/resp/manage-tab/dailog/module-dialog'
    export default {
        props: {
            pkGroup: {
                type: String,
                required: true,
                default: ''
            }
        },
        data() {
            return {
                activeNames: ['1'],
                defaultProps2: {
                    id: 'id',
                    label: 'label',
                    pid: 'pid',
                    children: 'children',
                },
                roleRespData: [],
                roleList: [],
                moduledailogVisible: false,
                error: false,
                expandedKeys: []
            }
        },
        components: {
            ModuleDailog
        },
        created() {

            this.getRoleList()
        },
        methods: {
            // 查询集团默认管理角色
            getRoleList() {
                let query = {
                    pkGroup: this.pkGroup,
                };
                admingroupService.getadmingrouprolelist(query).then(data => {
                    if (data && data.length > 0 ) {
                        this.roleList = data
                        // 加载角色默认职责
                        this.getRoleRespInfo()
                    } else {
                        this.error = true
                    }
                })
            },
            // 角色展开切换
            handleChange(val) {},
            // 打开职责修改框
            HandleRoleResp() {
                this.moduledailogVisible = true
                this.$nextTick(() => {
                    if (this.roleList.length > 0 ){
                        this.$refs.moduledailog.init(this.roleList[0].ext1)
                    }
                })
            },
            // 查询角色职责树
            getRoleRespInfo() {
                respModuleService.getRespModuleTree(this.roleList[0].ext1).then(data => {
                    this.roleRespData = data
                    data.forEach((item, index) => {
                        this.expandedKeys.push(item.id)
                    })
                })
            },
        }
    }
</script>
<style scoped>
 .center {

        width: 80%;
        margin: 0 auto;
    }
    .content {
        max-height: 370px;
        overflow: hidden;
        overflow-y: auto;
    }
    
    .content::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .content::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(184, 184, 184, 0.1);
        background: #c0c0c0;
    }

    .content::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(49, 49, 49, 0.1);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>